<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: white;
      }

      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
        transition: all linear 300;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">

      <!-- 第十一章 滤镜、投影 -->

      <!--
        feTurbulence元素，用于生成大理石、云彩等人工纹理效果。
          type: turbulence 和 fractalNoise 之一。后者显示更平滑。
          baseFrequency：给这个属性值的数字越大，结果颜色的变化越快。这个数值必须大于 0 且应该小于 1。还可以给这个属性提供两个数字，第一个将被作为 x 方向的频率，而第二个将被作为 y方向的频率。
          numOctaves：这是噪音函数使用的数值，生成最终结果时应该加上这个数值。数值越大，纹理粒度越细。默认值为 1。
          seed：这个滤镜使用的随机数生成器的种子。默认值为 0；改变它可以得到一些不同的结果。
      -->
      <defs>
        <filter id="turbFilter">
          <feTurbulence id="feTurbulenceEle"
                        type="turbulence"
                        baseFrequency="0.02"
                        numOctaves="3"
                        seed="40"
                        in="SourceGraphic" />
        </filter>

      </defs>

      <g transform="translate(10,20)">
        <rect x="50"
              y="50"
              width="250"
              height="250"
              style="filter: url(#turbFilter);" />
      </g>








    </svg>


    <script>
      const ele = document.querySelector("#feTurbulenceEle");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        ele.seed.baseVal = n / 10;
        window.requestAnimationFrame(Renderer);
      }
      Renderer();
    </script>
  </body>

</html>
